<template>
  <div class="div-app">

    <el-dialog
      :title="title"
      :visible="dialogVisible"
      width="600px"
      @close="ishowchange"
    >
      <span style="position: relative;top: 29px; right: -469px;  z-index: 99;color: #999;">{{ minlengh }} /15</span>
      <el-form
        ref="roleDialogForm"
        label-width="80px"
        :model="listIfon"
        :rules="rules"
      >
        <el-form-item
          prop="name"
          label="点位名称"
        >
          <el-input v-model="listIfon.name" placeholder="请输入" maxlength="15" />
        </el-form-item>
        <el-form-item
          prop="regionId"
          label="所在区域"
        >
          <el-select v-model="listIfon.regionId" placeholder="请选择活动区域">
            <el-option v-for="itme in arealist" :key="itme.id" :label="itme.name" :value="itme.id" />
          </el-select>
        </el-form-item>
        <el-form-item
          prop="businessId"
          label="所属商圈"
        >
          <el-select v-model="listIfon.businessId" placeholder="请选择活动区域">
            <el-option v-for="itme in shangquanlist" :key="itme.id" :label="itme.name" :value="itme.id" />
          </el-select>
        </el-form-item>
        <el-form-item
          prop="ownerName"
          label="归属合作"
        >
          <el-select v-model="listIfon.ownerName" placeholder="请选择活动区域">
            <el-option v-for="itme in hezuoshang" :key="itme.id" :label="itme.name" :value="itme.name" />
          </el-select>
        </el-form-item>
        <el-form-item
          prop="addr"
          label="详细地址"
        >
          <el-cascader
            v-model="listIfon.addr"
            placeholder="请选择"
            size="large"
            :options="options"
            @change="handleChange"
          />
        </el-form-item>
        <el-form-item label="" prop="remark" size="medium">
          <el-input v-model="listIfon.remark" placeholder="请输入备注(不超过四十字)" type="textarea" row="3" maxlength="40" />
        </el-form-item>
        <span style="position: relative;top: -47px;right: -467px;color: #999;"> {{ minlenghmax }} /40</span>
      </el-form>
      <el-row slot="footer" class="dialog-footer" type="flex" justify="center" align="middle">
        <el-button @click="ishowchange">取 消</el-button>
        <el-button style="background: linear-gradient(135deg,#ff9743,#ff5e20)!important; color: #fff;margin-left: 65px;" @click="regionget">确 定</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import { typelistApi, parthnerlist, adddianweiApi, changedianweiApi } from '@/api'
import { regionData, CodeToText } from 'element-china-area-data'
export default {

  name: 'Point2',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    changlist: {
      type: Object,
      default: () => ({})
    },
    arealist: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      ceshishishishish: {},
      options: regionData,
      shangquanlist: [],
      hezuoshang: [],
      listIfon: {
        name: '',
        // 所在区域
        regionId: '',
        // 所属商圈
        businessId: '',
        // 归属合作商
        ownerName: '',
        // 详情地址
        addr: '',
        // 输入详细地址
        remark: ''

      },
      rules: {
        name: [{ required: true, message: '请输入点位名称', trigger: 'blur' }],
        regionId: [{ required: true, message: '请选择区域', trigger: 'change' }],
        businessId: [{ required: true, message: '请选择商圈', trigger: 'change' }],
        ownerName: [{ required: true, message: '请选择商圈', trigger: 'change' }],
        addr: [{ required: true, message: '请选择商圈', trigger: 'change' }],
        remark: [{ required: true, message: '请填写详细信息', trigger: 'blur' }]
      }
    }
  },
  computed: {
    minlengh() {
      return this.listIfon.name?.length || 0
    },
    minlenghmax() {
      return this.listIfon.remark?.length || 0
    },
    title() {
      return this.listIfon.id ? '编辑点位' : '新增点位'
    }
  },

  async created() {
    const res = await typelistApi()
    const { data } = await parthnerlist()
    this.hezuoshang = data.currentPageRecords
    this.shangquanlist = res.data
  },
  methods: {
    ishowchange() {
      this.isshowaa()
    },
    async regionget() {
      try {
        try {
          await this.$refs.roleDialogForm.validate()
        } catch (error) {
          return
        }
        const aa = []
        this.listIfon.addr.forEach(itme => {
          aa.push(CodeToText[itme])
        })
        const bb = this.hezuoshang.find(itme => itme.name === this.listIfon.ownerName)
        const data = {
          name: this.listIfon.name,
          addr: aa.join('-') + '-' + this.listIfon.remark,
          areaCode: this.listIfon.addr.at(-1),
          createUserId: 1,
          regionId: this.listIfon.regionId,
          businessId: this.listIfon.businessId,
          ownerName: this.listIfon.ownerName,
          ownerId: bb.id
        }
        if (this.listIfon.id) {
          await changedianweiApi({ ...data }, this.listIfon.id)
        } else {
          await adddianweiApi({ ...data })
        }
        this.$message.success(`${this.listIfon.id ? '修改' : '新增'}成功`)
        this.$emit('changelist')
        this.isshowaa()
      } catch (error) {
        this.$message.error('重复点位,请重新填写')
      }
    },

    isshowaa() {
      this.$emit('update:dialogVisible', false)
      this.$refs.roleDialogForm.resetFields()
      this.listIfon = {
        name: '',
        // 所在区域
        regionId: '',
        // 所属商圈
        businessId: '',
        // 归属合作商
        ownerName: '',
        // 详情地址
        addr: '',
        // 输入详细地址
        remark: ''
      }
    },
    // 级联改变触发
    handleChange() {
    //   console.log(this.listIfon.addr)
    //   const arr = []
    //   this.listIfon.addr.forEach(itme => {
    //     arr.push(CodeToText(itme))
    //   })
    //   console.log(arr)
    }
  }
}
</script>
  <style scoped lang="scss">
  .point-app{
      width: 700px;
      height: 400px;
      border-radius: 20px;
      background-color: pink;
  }
  ::v-deep .el-dialog{
     border-radius: 20px;
     .el-dialog__body{
      width: 550px;
      margin: 0 auto;
     }
  }
  ::v-deep .el-cascader{
    width: 100%;
  }
  ::v-deep .el-select{
    width: 100%;
  }
  </style>

